import React, { useEffect, useRef } from "react";

import Swipe from "@/swipe/src";

function Page(): JSX.Element {
  const swipe = useRef<Swipe | null>(null);
  useEffect(() => {
    const swipeEl = document.querySelector(".dsh-prose-swipe");
    if (swipeEl != null) {
      swipe.current = new Swipe(swipeEl as HTMLElement, {
        autoplay: true,
        // interval: 1000,
        // defaultCurrent: 2,
        // circular: false,
        // vertical: true,
        // previousMargin: "10px",
        // nextMargin: "10px",
        // displayMultipleItems: 2,
        // switchProportion: 5,
        // switchDistance: 100,
        // onChange({ current }) {
        //   console.log("current", current);
        // },
        // onAnimationFinish(current, { dx, dy }) {
        //   console.log("current", current, dx, dy);
        // },
      });
    }
    return () => {
      swipe.current?.destroy();
    };
  }, []);

  return (
    <div className="dsh-prose-swipe" style={{ borderBottom: "1px solid #ccc" }}>
      <div className="dsh-prose-swipe-wrapper">
        <div className="dsh-prose-swipe-slide" style={{ backgroundColor: "red" }}>
          <span>1</span>
        </div>
        <div className="dsh-prose-swipe-slide" style={{ backgroundColor: "green" }}>
          <span>2</span>
        </div>
        <div className="dsh-prose-swipe-slide" style={{ backgroundColor: "blue" }}>
          <span>3</span>
        </div>
      </div>
      <div className="dsh-prose-swipe-pagination"></div>
    </div>
  );
}

export default Page;
